// 由于 webpack 是基于Node进行构建的,下面是Node语法
var path = require('path')

// 在内存中,根据指定的模版页面,生成一份内存中的首页,同时自动把打包好的bundle注入到页面底部
// 如果要配置插件, 需要在导出的对象中, 挂在一个plugins
var htmlWebpackPlugin = require('html-webpack-plugin')

// vue-loader15.X 伴生 vueloaderplugin
const VueLoaderPlugin = require('vue-loader/lib/plugin');

// 配置入口和导出 打包
module.exports = {
	entry:path.join(__dirname, './src/main.js'),
	output:{
		path:path.join(__dirname, './dist/'),
		filename:'bundle.js',

	},
	plugins: [ // 所有webpack 插件的配置节点
		new htmlWebpackPlugin({
			template: path.join(__dirname, './src/index.html'),
			filename: 'index.html',  // 设置生成的内存页面的名称
		}),
		new VueLoaderPlugin()
	],
	module: {
		rules: [
			{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
			{ test: /\.vue$/, use: 'vue-loader'}, //处理.vue文件
			{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] },
			{ test: /\.(jpg|png|gif|bmp|jpeg|ttf)$/, use:'url-loader?limit=' },
			{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
		]
	},
	mode:'development',
	resolve:{
		alias:{ // 修改 vue 被导入时候的包的路径
			// "vue$":"vue/dist/vue.js"
		}
	}
}